<template>
    <div v-loading="loading">
        <el-row>
            <el-form
                ref="searchForm"
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
            >
                <el-form-item label="资源名称" prop="name">
                    <el-input v-model.trim="searchForm.name" placeholder="资源名称"></el-input>
                </el-form-item>
                <el-form-item label="资源类型" prop="type">
                    <el-select v-model="searchForm.type" placeholder="资源类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option :value="0" label="菜单"></el-option>
                        <el-option :value="1" label="按钮"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可用" prop="available">
                    <el-select v-model="searchForm.available" placeholder="是否可用">
                        <el-option label="全部" value=""></el-option>
                        <el-option :value="1" label="可用"></el-option>
                        <el-option :value="0" label="不可用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查 询</el-button>
                    <el-button @click="resetSearchForm('searchForm')">重 置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-button type="primary" @click="addHandleClick">添加</el-button>
            <el-button type="primary" @click="dialogBatchVisible = true">自动创建资源</el-button>
            <p/>
        </el-row>

        <el-table
            :data="tableData"
            :tree-props="{ children: 'childResources' }"
            border
            row-key="id"
            style="width: 100%"
        >
            <el-table-column fixed label="ID" prop="id" width="100">
            </el-table-column>
            <el-table-column label="资源名称" prop="name" width="180">
            </el-table-column>
            <el-table-column label="图标" prop="icon" width="200">
                <template slot-scope="scope">
                    <div v-if="scope.row.icon" style="display: flex;align-items: center">
                        <svg-icon v-if="scope.row.icon.substr(0,3) != 'el-'" :icon-class="scope.row.icon"
                                  style="height: 30px;width: 16px;margin-right: 10px"/>
                        <i style="margin-right: 10px" v-else :class="scope.row.icon"></i>
                        <span>{{ scope.row.icon }}</span>
                    </div>
                    <span v-else>无</span>
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="orderNum" width="180">
            </el-table-column>
            <el-table-column label="权限" prop="permission"></el-table-column>
            <el-table-column label="链接" prop="url"></el-table-column>
            <el-table-column
                :formatter="typeFormatter"
                label="类型"
                align="center"
                prop="type"
                width="100"
            >
                <template slot-scope="scope">
                    <el-tag type="warning">{{ typeFormatter(_, _, scope.row.type) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                :formatter="availableFormatter"
                label="是否可用"
                prop="available"
                align="center"
                width="100"
            >
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.available">可用</el-tag>
                    <el-tag type="info" v-else>不可用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                :formatter="hiddenFormatter"
                label="是否隐藏"
                align="center"
                prop="hidden"
                width="100"
            >
                <template slot-scope="scope">
                    <i v-if="!scope.row.available" class="el-icon-close"></i>
                    <el-tag type="info" v-else-if="scope.row.hidden">隐藏</el-tag>
                    <el-tag v-else>不隐藏</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="viewDetail(scope.row)">查看</el-button>
                    <el-button
                        size="small"
                        type="text"
                        @click="editorHandleClick(scope.row)">编辑
                    </el-button>
                    <el-button
                        v-auth="['/resource/delete']"
                        size="small"
                        type="text"
                        @click="deleteHandleClick(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 列表分页操作区域 -->
        <pagination :current-page="currentPage" :page-size="pageSize" :total="totalCount"
                    @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>


        <el-dialog :title="isEditor ? '编辑资源':'添加资源'" :visible.sync="dialogAddFormVisible" @close="resetForm('form')"
                   width="600px">
            <el-form ref="form" :model="form" :rules="rules">
                <el-input v-model="form.id" autocomplete="off" type="hidden"></el-input>
                <el-form-item
                    v-show="true"
                    :label-width="formLabelWidth"
                    label="父类栏目"
                    prop="parentId"
                >
                    <el-cascader v-model="form.parentId" :options="resources" style="width: 85%"
                                 :props="{ checkStrictly: true ,value:'id',label:'name'}"
                                 expandTrigger="hover" @visible-change="handleVisChange"
                                 clearable filterable>
                    </el-cascader>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="资源名称"
                    prop="name"
                >
                    <el-input v-model="form.name" autocomplete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="排序"
                    prop="orderNum"
                >
                    <el-input style="width: 85%"
                              v-model.number="form.orderNum"
                              autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="权限字段"
                    prop="permission"
                >
                    <el-input v-model="form.permission" autocomplete="off" style="width: 85%"></el-input>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" label="链接地址" prop="url">
                    <el-input placeholder="请输入内容" v-model="form.url" style="width: 85%">
                        <template slot="prepend">
                            <el-select v-model="linkPrefix" placeholder="请选择" style="width: 100px"
                                       @change="linkPrefixChange">
                                <el-option
                                    v-for="item in linkPrefixOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="11">
                        <el-form-item
                            :label-width="formLabelWidth"
                            label="是否可用"
                            prop="available">
                            <el-switch
                                v-model="form.available"
                                active-text="可用"
                                inactive-text="不可用">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.available" :span="11">
                        <el-form-item
                            :label-width="formLabelWidth"
                            label="是否隐藏"
                            prop="hidden">
                            <el-switch
                                v-model="form.hidden"
                                active-text="隐藏"
                                inactive-text="不隐藏">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="菜单类型"
                    prop="type"
                >
                    <el-select v-model="form.type" placeholder="选择菜单类型" style="width: 85%">
                        <el-option :value="0" label="菜单"></el-option>
                        <el-option :value="1" label="按钮"></el-option>
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-form-item
                        v-if="form.type == 0"
                        :label-width="formLabelWidth"
                        label="组件"
                        prop="component">
                        <el-input v-model="form.component" autocomplete="off" style="width: 85%"
                                  placeholder="请填写组件，如views/**/***"></el-input>
                    </el-form-item>
                    <el-form-item
                        v-if="form.type == 0"
                        :label-width="formLabelWidth"
                        label="图标"
                        prop="icon">
                        <el-popover
                            placement="top-start"
                            trigger="click"
                            width="666"
                            @show="$refs['iconSelect'].reset()">
                            <IconSelect ref="iconSelect" @selected="selected"/>
                            <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly
                                      style="width: 85%">
                                <i slot="prefix" style="margin-left: 5px"
                                   v-if="form.icon && form.icon.substring(0,3) == 'el-'" :class="form.icon"></i>
                                <svg-icon
                                    v-else-if="form.icon"
                                    slot="prefix"
                                    :icon-class="form.icon"
                                    class="el-input__icon"
                                    style="height: 32px;width: 16px;margin-left:5px"
                                />
                                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
                                <el-button style="margin-right: 5px" type="text" slot="suffix" v-if="form.icon"
                                           @click="form.icon=''"><i class="el-icon-circle-close"></i></el-button>
                            </el-input>
                        </el-popover>
                    </el-form-item>

                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="!isEditor" @click="resetForm('form')">重 置</el-button>
                <el-button v-if="isEditor" @click="dialogAddFormVisible = false"
                >取 消
                </el-button
                >
                <el-button type=" primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogBatchVisible" title="自动生成资源" @close="resetForm('form')" width="600px">
            <el-form ref="form" :model="form" :rules="rules">
                <el-input v-model="form.id" autocomplete="off" type="hidden" style="width: 85%"></el-input>
                <el-form-item
                    v-show="form.type != 1"
                    :label-width="formLabelWidth"
                    label="父类栏目"
                    prop="parentId"
                >
                    <el-cascader v-model="form.parentId" :options="resources"
                                 :props="{ checkStrictly: true ,value:'id',label:'name'}" style="width: 85%"
                                 clearable filterable></el-cascader>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="资源名称"
                    prop="name"
                >
                    <el-input v-model="form.name" autocomplete="off" style="width: 85%"></el-input>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="排序"
                    prop="orderNum"
                >
                    <el-input style="width: 85%"
                              v-model.number="form.orderNum"
                              autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="权限字段"
                    prop="permission"
                >
                    <el-input v-model="form.permission" style="width: 85%" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item
                    :label-width="formLabelWidth"
                    label="是否可用"
                    prop="available"
                >
                    <el-switch
                        v-model="form.available"
                        active-text="可用"
                        inactive-text="不可用"
                    >
                    </el-switch>
                </el-form-item>
                <el-form-item
                    v-if="form.type == 0"
                    :label-width="formLabelWidth"
                    label="组件"
                    prop="component">
                    <el-input v-model="form.component" autocomplete="off" style="width: 85%"
                              placeholder="请填写组件，如views/**/***"></el-input>
                </el-form-item>
                <el-form-item
                    v-if="form.type == 0"
                    :label-width="formLabelWidth"
                    label="图标"
                    prop="icon">
                    <el-popover
                        placement="top-start"
                        trigger="click"
                        width="666"
                        @show="$refs['iconSelect'].reset()">
                        <IconSelect ref="iconSelect" @selected="selected"/>
                        <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly style="width: 85%">
                            <i slot="prefix" style="margin-left: 5px"
                               v-if="form.icon && form.icon.substring(0,3) == 'el-'" :class="form.icon"></i>
                            <svg-icon
                                v-else-if="form.icon"
                                slot="prefix"
                                :icon-class="form.icon"
                                class="el-input__icon"
                                style="height: 32px;width: 16px;margin-left:5px"
                            />
                            <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
                            <el-button style="margin-right: 5px" type="text" slot="suffix" v-if="form.icon"
                                       @click="form.icon=''"><i class="el-icon-circle-close"></i></el-button>
                        </el-input>
                    </el-popover>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="!isEditor" @click="resetForm('form')">重 置</el-button>
                <el-button v-if="isEditor" @click="dialogBatchVisible = false"
                >取 消
                </el-button
                >
                <el-button type=" primary" @click="batchCreate">确 定</el-button>
            </div>
        </el-dialog>

        <!--        查看-->
        <el-dialog :visible.sync="viewDetailVisible" title="查看">
            <el-descriptions :column="3" :size="size" border class="margin-top" title="">
                <!--              <template slot="extra">
                                  <el-button type="primary" size="small">操作</el-button>
                              </template>-->
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-star-off"></i>
                        资源名称
                    </template>
                    <el-tag size="small" type="primary">{{ detailContent.name }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-postcard"></i>
                        权限
                    </template>
                    <el-tag size="small">{{ detailContent.permission }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-menu"></i>
                        类型
                    </template>
                    <el-tag v-if="detailContent.type" size="small">按钮</el-tag>
                    <el-tag v-else size="small">菜单</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i v-if="detailContent.available" class="el-icon-open"></i>
                        <i v-else class="el-icon-turn-off"></i>
                        是否可用
                    </template>
                    <el-tag v-if="detailContent.available" size="small">是</el-tag>
                    <el-tag v-else size="small">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i v-if="detailContent.hidden" class="el-icon-open"></i>
                        <i v-else class="el-icon-turn-off"></i>
                        是否隐藏
                    </template>
                    <el-tag v-if="detailContent.available" size="small">否</el-tag>
                    <el-tag v-else size="small">是</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-sort"></i>
                        排序
                    </template>
                    {{ detailContent.orderNum }}
                </el-descriptions-item>
                <el-descriptions-item v-if="detailContent.type == 0 && detailContent.component">
                    <template slot="label">
                        <i class="el-icon-paperclip"></i>
                        组件
                    </template>
                    /{{ detailContent.component }}
                </el-descriptions-item>
                <el-descriptions-item v-if="detailContent.url">
                    <template slot="label">
                        <i class="el-icon-connection"></i>
                        链接地址
                    </template>
                    <el-link v-if="detailContent.flag" :href="detailContent.link" target="_blank" type="primary">
                        {{ detailContent.url }}
                    </el-link>
                    <router-link v-else :to="detailContent.link" target="_blank">
                        <el-link type="primary">
                            {{ detailContent.url }}
                        </el-link>
                    </router-link>
                </el-descriptions-item>
                <el-descriptions-item v-if="detailContent.icon">
                    <template slot="label">
                        <i class="el-icon-picture-outline-round"></i>
                        图标
                    </template>
                    <div style="display:flex;align-item:center">
                        <i v-if="detailContent.icon.substring(0,3) == 'el-'" style="align-self:center"
                           :class="detailContent.icon"></i>
                        <svg-icon
                            v-else
                            :icon-class="detailContent.icon"
                            class="el-input__icon"
                            style="height: 32px;width: 16px;margin-left:5px"
                        />
                        <span style="display:flex;align-self:center;margin-left:5px">{{ detailContent.icon }}</span>
                    </div>
                </el-descriptions-item>

            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import {
    LOAD_RESOURCES_URL,
    LIST_RESOURCES_URL,
    ADD_OR_EDITOR_RESOURCES_URL,
    DELETE_RESOURCES_URL,
    FIND_RESOURCES_URL,
    BATCH_CREATE_URL,
} from "../../utils/api.js";
import IconSelect from "@/components/IconSelect";
import Pagination from "@/components/Pagination/Pagination";
import SvgIcon from "@/components/SvgIcon/SvgIcon";

export default {
    components: {IconSelect, SvgIcon, Pagination},
    data() {
        return {
            linkPrefixOptions: [{
                value: 'http://',
                label: 'http://'
            }, {
                value: 'https://',
                label: 'https://'
            }, {
                value: 'mailto://',
                label: 'mailto://'
            }],
            size: '',
            detailContent: {},
            viewDetailVisible: false,
            tmpRow: "",
            searchForm: {
                name: "",
                type: "",
                available: "",
            },
            multipleSelection: [],
            tableData: [],
            resources: [],
            dialogFormVisible: false,
            dialogAddFormVisible: false,
            dialogBatchVisible: false,
            isEditor: false,
            // 默认显示第几页
            currentPage: 1,
            // 总条数，根据接口获取数据长度(注意：这里不能为空)
            totalCount: 1,
            pageSize: 10,
            linkPrefix: "http://",
            form: {
                id: "",
                name: "",
                icon: '',
                parentId: [1],
                orderNum: 100,
                permission: "",
                available: true,
                hidden: false,
                type: 0,
                url: "",
                desc: "",
                path: "",
                component: "",
            },
            formLabelWidth: "120px",
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入资源名称",
                        trigger: "blur",
                    },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20个字符",
                        trigger: "blur",
                    },
                ],
                permission: [
                    {
                        required: true,
                        message: "请输入权限名称",
                        trigger: "blur",
                    },
                ],
                url: [
                    {
                        required: false,
                        message: "请输入访问地址",
                        trigger: "blur",
                    },
                ],
                parentId: [
                    {
                        required: true,
                        message: "请选择父类栏目",
                        trigger: "change",
                    },
                ],
                type: [
                    {
                        required: true,
                        message: "请选择资源类型",
                        trigger: "change",
                    },
                ],
                orderNum: [
                    {
                        type: "number",
                        message: "排序必须为数字值",
                        trigger: "blur",
                    },
                    {
                        pattern: /^(0|[1-9]\d?|100)$/,
                        message: "范围在0-100",
                        trigger: "blur",
                    },
                ],
            },
            loading: true
        };
    },
    created: function () {
        this.loadResources();
        this.listResources();
    },
    methods: {
        loadResources: function (val) {
            if (!val) {
                val = 1;
            }
            let url = LOAD_RESOURCES_URL + "/" + val;
            this.axios({
                method: "GET",
                url: url,
                data: this.$data.searchForm,
            })
                .then((res) => {
                    let code = res.data.code;
                    if (code == 200) {
                        res.data.data.unshift({
                            id: 1,
                            name: "顶级栏目",
                            disabled: false,
                            children: []
                        })
                        res.data.data.forEach((item) => {
                            item.disabled = false;
                        })
                        this.$data.resources = res.data.data;
                    } else {
                        this.$message.error("加载资源失败");
                    }
                })
                .catch((error) => {
                    // this.$message.error('加载资源失败');
                    console.log(error);
                });
        },
        listResources: function () {
            this.$data.loading = true;
            let url =
                LIST_RESOURCES_URL + "/" + this.currentPage + "/" + this.pageSize;
            this.axios({
                method: "POST",
                url: url,
                data: this.$data.searchForm,
            })
                .then((res) => {
                    console.log(res.data.data)
                    this.$data.loading = false;
                    let code = res.data.code;
                    if (code == 200) {
                        this.$data.tableData = res.data.data.records;
                        this.$data.totalCount = res.data.data.total;
                        this.$data.currentPage = res.data.data.current;
                    } else {
                        this.$message.error("加载资源失败");
                    }
                })
                .catch((error) => {
                    // this.$message.error('加载资源失败');
                    console.log(error);
                });
        },
        editorHandleClick: function (row) {
            // 全局临时row变量
            this.tmpRow = row;
            // 过滤自身id相同选项
            this.filterSelf(this.resources, true);

            this.$data.isEditor = true;
            this.resetForm("form");
            this.$data.dialogAddFormVisible = true;
            let url = FIND_RESOURCES_URL + "/" + row.id;
            this.axios({
                method: "GET",
                url: url,
                data: {},
            }).then((res) => {
                let code = res.data.code;
                if (code == 200) {
                    this.$data.form = res.data.data;
                    if (this.form.url) {
                        this.$data.linkPrefix = this.form.url.split("://")[0].concat("://")
                        this.$data.form.url = this.$data.form.url.split('://')[1]
                    }
                } else {
                    this.$message.error("加载资源失败");
                }
            })
                .catch((error) => {
                    // this.$message.error('加载资源失败');
                    console.log(error);
                });
        },
        addHandleClick: function () {
            this.filterSelf(this.resources, false)
            this.$data.isEditor = false;
            this.$data.dialogAddFormVisible = true;
            this.$data.form.id = 0;
            this.$nextTick(() => {
                this.$refs["form"].resetFields();
            });
        },
        autoAddHandleClick: function () {
            this.$data.isEditor = false;
            this.$data.dialogBatchVisible = true;
            // this.$data.form.id = 0;
            this.form = {
                id: "",
                name: "",
                parentId: 1,
                orderNum: 100,
                permission: "",
                available: true,
                type: 0,
                url: "",
                desc: "",
                path: "",
                component: "",
            }
            this.$nextTick(() => {
                this.$refs["form"].resetFields();
            });
        },
        handleCurrentChange: function (val) {
            console.log(`当前页: ${val}`);
            this.$data.currentPage = val;
            this.listResources();
        },
        //改变每页显示数量，重新加载数据
        handleSizeChange: function (val) {
            this.$data.currentPage = 1;
            this.$data.pageSize = val;
            this.listResources();
        },
        saveOrUpdate: function () {
            // 比较每一项判断表单是否更改，由于20004不会出现，可能是对象数据的问题
            console.log(this.tmpRow.url)
            if (this.isEditor && this.form.icon == this.tmpRow.icon && this.form.component == this.tmpRow.component
                && this.form.parentId == this.tmpRow.parentId && this.form.hidden == this.tmpRow.hidden
                && this.form.name == this.tmpRow.name && this.form.available == this.tmpRow.available
                && (!this.tmpRow.url || this.linkPrefix.concat(this.form.url) == this.tmpRow.url)
                && this.form.permission == this.tmpRow.permission && this.form.orderNum == this.tmpRow.orderNum && this.form.type == this.tmpRow.type) {
                this.$message.error('请先修改数据再更新');
                return
            }
            if (this.form.url != '') {
                this.form.url = this.$data.linkPrefix + this.form.url
            }
            this.form.path = this.form.permission;
            let data = JSON.parse(JSON.stringify(this.form))
            data.parentId = this.form.parentId[this.form.parentId.length - 1];
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.axios({
                        method: "POST",
                        url: ADD_OR_EDITOR_RESOURCES_URL,
                        data: data,
                    })
                        .then((res) => {
                            let code = res.data.code;
                            if (code == 200) {
                                this.listResources();
                                this.$data.dialogAddFormVisible = false;
                                this.loadResources();
                                /*if(this.isEditor){
                                    this.$router.go(0)
                                }*/
                            } else if (code == 20004) {
                                this.$message.error('请先修改数据再更新');
                            }
                        })
                        .catch((error) => {
                            // this.$message.error('加载资源失败');
                            console.log(error);
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        batchCreate: function () {
            this.form.path = this.form.permission;
            let data = JSON.parse(JSON.stringify(this.form))
            data.parentId = this.form.parentId[this.form.parentId.length - 1];
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.axios({
                        method: "POST",
                        url: BATCH_CREATE_URL,
                        data: data,
                    })
                        .then((res) => {
                            console.log(res.data);
                            let code = res.data.code;
                            console.log(JSON.stringify(res.data));
                            if (code == 200) {
                                this.listResources();
                                this.loadResources();
                                this.dialogBatchVisible = false;
                            } else if (code == 20003) {
                                this.$message.error('已经存在相同资源');
                            }
                        })
                        .catch((error) => {
                            // this.$message.error('加载资源失败');
                            console.log(error);
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        deleteHandleClick: function (row) {
            this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.delete(row);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        delete: function (row) {
            let id = row.id;

            let url = DELETE_RESOURCES_URL + "?ids=" + id;

            this.axios({
                method: "GET",
                url: url,
                data: {},
            })
                .then((res) => {
                    console.log(res.data);
                    let code = res.data.code;
                    console.log(JSON.stringify(res.data));
                    if (code == 200) {
                        this.listResources();
                    } else if (code == 20001) {
                        this.$message.warning("请先删除子项");
                    } else if (code == 20002) {
                        this.$message.warning("资源已经使用，请在角色管理中解绑后，再操作");
                    }
                })
                .catch((error) => {
                    // this.$message.error('加载资源失败');
                    console.log(error);
                });
        },
        typeFormatter: function (row, column, cellValue) {
            return cellValue == 0 ? "菜单" : "按钮";
        },
        availableFormatter: function (row, column, cellValue) {
            return cellValue ? "可用" : "不可用";
        },
        hiddenFormatter: function (row, column, cellValue) {
            return cellValue ? "隐藏" : "不隐藏";
        },
        resetForm: function (formName) {
            this.$data.linkPrefix = "http://"
            this.$nextTick(() => {
                this.$refs[formName].resetFields();
            });
        },
        resetSearchForm: function (formName) {
            console.log(formName);
            this.$nextTick(() => {
                this.$refs[formName].resetFields();
                this.onSearch();
            });
        },
        onSearch: function () {
            console.log(JSON.stringify(this.$data.searchForm));
            this.listResources();
        },
        // 选择图标
        selected(name) {
            this.$data.form.icon = name;
        },
        // cascader expand or fold function
        handleVisChange: function (val) {
            if (this.isEditor) {
                // expand
                if (val) {
                    this.filterSelf(this.resources, true)
                } else { // fold
                    this.filterSelf(this.resources, false)
                }
            }
        },
        // 过滤自身id相同选项
        filterSelf(resource, flag) {
            var num = 0
            resource.forEach((item) => {
                if (item.id == this.tmpRow.id) {
                    num++;
                    item.disabled = flag;
                    if (item.children != null) {
                        this.filterChild(item.children, flag);
                    }
                }
                if (num == 0 && item.children != null) {
                    this.filterSelf(item.children, flag)
                }
            })
        },
        // 过滤子选项
        filterChild(resource, flag) {
            if (resource == null) {
                return
            }
            resource.forEach((item) => {
                item.disabled = flag;
            })
            this.filterChild(resource.children, flag);
        },
        viewDetail: function (row) {
            this.viewDetailVisible = true;
            this.$data.detailContent = row;
            this.$data.detailContent.link = this.$data.detailContent.url;
            this.$data.detailContent.flag = 1;

        },
        linkPrefixChange: function (val) {
            this.$data.linkPrefix = val;
        }
    },
};
</script>
